<template>
  <div class="detail">
    <my-header
      class="detail__header"
      :leftText="headerInfo.leftText"
      :title="headerInfo.title"
      :routerName = "headerInfo.routerName"
    ></my-header>
    <div class="detail__content">
      <div class="detail__content-headPortrait">
        <img src="@assets/images/user.jpg" alt="头像" />
      </div>
      <!--<van-cell-group>-->
        <!--<van-cell title="用户名" :value="userInfo.nickname" />-->
        <!--<van-cell title="性别" :value="userInfo.gender === 0 ? '男' : '女'" />-->
        <!--<van-cell title="邮箱" :value="userInfo.email" />-->
        <!--<van-cell title="生日" :value="userInfo.birthday" />-->
        <!--<van-cell title="地址" :value="userInfo.address" />-->
      <!--</van-cell-group>-->
      <van-form @submit="editUserPassword">
        <van-field
          readonly
          v-model="userInfo.id"
          name="id"
          label="ID"
          placeholder="ID"
          :rules="[{ required: true, message: '请检查ID' }]"
        />
        <van-field
          readonly
          v-model="userInfo.userName"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import * as UserAPI from "@/api/userInfo";
import MyHeader from "@/components/Header";
import { mapGetters } from 'vuex'
import {Notify} from 'vant';
export default {
  name: "userDetail",
  components: {
    MyHeader
  },
  data() {
    return {
      userFromStore: this.user,
      userInfo: {},
      password:null,
      headerInfo: {
        leftText: "返回",
        title: "用户信息",
        routerName:"/"
      },

    };
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  mounted() {
    this.queryUserInfo(this.user);
  },
  methods: {
    queryUserInfo(data) {
      console.info(data)
      console.info(this.user)
      UserAPI.queryUserById(this.user.id).then((result = {}) => {
        this.userInfo = result;
      });
    },
    editUserPassword(value) {
      console.info(value)
      UserAPI.editUserPassword({
        id: this.userInfo.id,
        password:value.password
      }).then(
        Notify({ type: 'success', message: '修改成功' })
      ).catch(() => {
        Notify('修改失败')
      })
    },
  }
};
</script>

<style lang="scss" scoped>
.detail {
  &__content {
    &-headPortrait {
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 80px;
        height: 80px;
        margin: 0 auto;
        border-radius: 50%;
      }
    }
  }
}
</style>
